<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-02-29 11:25:43"
-->
<template>
  <v-tabs v-model="tabIndex">
    <v-tab>模版消息</v-tab>
    <v-tab>模版配置</v-tab>
    <v-tab-item class="mt-3">
      <v-data-table
        dense
        flat
         class=""
        :headers="tableHeader"
        :items="tableItems"
        :page.sync="tablePage"
        :options.sync="tableOptions"
        :items-per-page="tablePagePer"
        hide-default-footer
        :loading="tableLoading"
        must-sort
        calculate-widths>
          <template v-slot:top>
            <v-btn class="ma-3" @click="tabIndex = 1">群发新消息</v-btn>
          </template>
          <template v-slot:item.first="{ item }">
            <span :style="'color:' + item.first.color">{{ item.first.value }}</span>
          </template>
          <template v-slot:item.keyword1="{ item }">
            <span :style="'color:' + item.keyword1.color">{{ item.keyword1.value }}</span>
          </template>
          <template v-slot:item.keyword2="{ item }">
            <span :style="'color:' + item.keyword2.color">{{ item.keyword2.value }}</span>
          </template>
          <template v-slot:item.remark="{ item }">
            <span :style="'color:' + item.remark.color">{{ item.remark.value }}</span>
          </template>
          <template v-slot:item.url="{ item }">
            <a :href="item.url" target="_blank" rel="noopener noreferrer">{{item.url}}</a>
          </template>
          <template v-slot:footer>
            <p class="text-center">共<b>{{tableItemTotal}}</b>条数据</p>
            <v-pagination color="primary" v-model="tablePage" :length="tablePageCount"></v-pagination>
          </template>
      </v-data-table>
      <TemplateMessageSend :dialog.sync="formDialog" :template="tableSelectItem" v-on:refreshdata="fetchMsg"/>
    </v-tab-item>
    <v-tab-item class="mt-3">
      <v-lazy v-model="lazyActive">
        <TemplateIndustry/>
      </v-lazy>
      <v-card class="mt-4" flat>
        <v-card-title>已添加的行业模版 <v-spacer></v-spacer>
        <v-dialog v-model="dialog" width="500">
          <template v-slot:activator="{ on }">
            <v-btn v-on="on" color="secondary">添加</v-btn>
          </template>
          <v-card>
            <v-card-title>输入模版ID</v-card-title>
            <v-card-subtitle>获取模板ID的过程需在微信公众平台后台完成
              <!-- <v-btn text href="https://mp.weixin.qq.com/" target="_blank" small>去查看</v-btn> -->
            </v-card-subtitle>
            <v-card-text>
              <v-text-field v-model="shortId"></v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-btn @click="addTemplateFunc">提交</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        </v-card-title>
        <v-card-text>
         <v-row>
           <v-col v-for="item in tmpItems" :key="item.template_id">
             <TemplateCard :item="item">
              <v-btn @click="sendHandle(item)" color="primary">发送</v-btn>
              <v-btn @click="delTemplateFunc(item.template_id)" color="warning" text>删除</v-btn>
             </TemplateCard>
           </v-col>
         </v-row>
        </v-card-text>
      </v-card>
      <!-- </v-lazy> -->
    </v-tab-item>
  </v-tabs>
</template>
<script>
import TemplateIndustry from './components/TemplateIndustry.vue'
import TemplateMessageSend from './components/TemplateMessageSend.vue'
import TemplateCard from './components/TemplateCard.vue'
import { getTemplate, addTemplate, delTemplate } from '@/api/admin/wx.js'
import * as API from '@/api/admin/template.js'
export default {
  name: 'WxTemplateMessage',
  components: { TemplateMessageSend, TemplateCard, TemplateIndustry },
  data: function () {
    return {
      lazyActive: false,
      tabIndex: 0,
      templateId: '',
      dialog: false,
      shortId: '', // 新增模版
      tmpItems: [],
      tableHeader: [
        { text: 'ID', value: 'id' },
        { text: '标题', value: 'first' },
        { text: '副标题', value: 'keyword1' },
        { text: '通知内容', value: 'keyword1' },
        { text: '备注信息', value: 'remark' },
        { text: '链接地址', value: 'url' },
        // { text: '作者', value: 'creator' },
        { text: '状态', value: 'status' },
        { text: '时间', value: 'createdAt' },
        { text: '操作', value: 'id', sortable: false }
      ],
      tableItems: [],
      tableLoading: true,
      tableOptions: {}, // 分页参数
      tablePage: 1, // 页码
      tablePageCount: 0, // 总页数
      tablePagePer: 30, // 每页个数
      tableItemTotal: 0, // 总个数
      tableSelectItem: {},
      formDialog: false
    }
  },
  watch: {
    lazyActive: function(newVal) {
      if (newVal) {
        this.fetchTemplateList()
      }
    },
    tablePage: function() {
      this.fetchMsg()
    },
    tableOptions: {
      handler () {
        this.fetchMsg()
      },
      deep: true
    }
  },
  methods: {
    sendHandle(item) {
      this.tableSelectItem = item
      this.formDialog = true
    },
    fetchMsg() {
      this.tabIndex = 0
      this.tableLoading = true
      const { sortBy, sortDesc } = this.tableOptions
      API.fetchList({ page: this.tablePage, descending: sortDesc[0], sort: sortBy[0], page_size: this.tablePagePer }).then(res => {
        this.tableItems = res.data.data
        this.tableItemTotal = res.data.total
        this.tablePageCount = res.data.last_page
      }).finally(() => {
        this.tableLoading = false
      })
    },
    fetchTemplateList() {
      getTemplate().then(res => {
        this.tmpItems = res.data.template_list
      })
    },
    addTemplateFunc() {
      addTemplate(this.shortId).then(res => {
        // eslint-disable-next-line
        if (res.data.errcode == 0) {
          this.$toasted.success('添加成功！')
        } else {
          this.$toasted.error(res.data.errmsg)
        }
      })
    },
    delTemplateFunc(templateId) {
      delTemplate(templateId).then(res => {
        // eslint-disable-next-line
        if (res.data.errcode == 0) {
          this.$toasted.success('删除成功！')
          this.fetchTemplateList()
        } else {
          this.$toasted.error(res.data.errmsg)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
